<script setup lang="ts">
import appConfig from '../../../../../package.json'
import { reactive } from 'vue'
import { Check, Close } from '@element-plus/icons-vue'

const form = reactive<{
  isStart: boolean
  isAdministrator: boolean
}>({
  isStart: false,
  isAdministrator: false
})
</script>
<template>
  <div class="setting-form">
    <el-form :model="form" label-width="auto">
      <el-form-item label="开机启动">
        <div class="flex items-center gap-2">
          <el-switch
            v-model="form.isStart"
            inline-prompt
            :active-icon="Check"
            :inactive-icon="Close"
          />
          <el-checkbox v-model="form.isAdministrator" label="管理员身份运行" />
        </div>
      </el-form-item>
      <el-form-item label="版本更新">
        <span class="mr-2">V {{ appConfig.version }}</span>
        <el-button type="text" class="check-update">
          <div class="flex gap-1 items-center">
            <span>检测</span>
            <svg-icon name="update" :width="15" :height="15" fill="var(--el-color-primary)" />
          </div>
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<style lang="scss" scoped>
.check-update {
  --el-color-primary: #409eff;

  &:hover {
    --el-color-primary: #79bbff;
  }
}
</style>
